<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>传递json给服务器</h2>
    <button class="get">获取图书</button>
    <button class="add">新增图书</button>
    <button class="edit">修改图书</button>
    <button class="delete">删除图书</button>
    <script>
      /*
        参数是一个对象
          url 地址+get的参数(如果有的话)
          method
          data:{} 通过请求体传递的数据 写到这里.对象的格式
         
      */
      function myAxios(option) {
        // 获取传入的属性
        const { url, method = 'get', data } = option
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest()
          // 调用 新闻接口
          xhr.open(method, url)
          // 设置 请求头 内容格式为JSON
          xhr.setRequestHeader('content-type', 'application/json')
          xhr.addEventListener('load', function () {
            // console.log('load:', xhr.response)
            // 通过 resolve 将成功的结果传递给then
            resolve(xhr.response)
          })
          // 发送  JSON
          xhr.send(JSON.stringify(data))
        })
      }

      // 1.测试获取图书接口
      document.querySelector('.get').onclick = function () {
        myAxios({
          url: 'http://ajax-api.itheima.net/api/books',
          // method:"",
        }).then((res) => {
          console.log('res:', res)
        })
      }
      // 2.新增图书接口
      document.querySelector('.add').onclick = function () {
        myAxios({
          url: 'http://ajax-api.itheima.net/api/books',
          method: 'post',
          data: {
            bookname: '水浒传',
            author: '施耐庵',
            publisher: '犇犇出版社',
          }, // 对象
        }).then((res) => {
          console.log('res:', res)
        })
      }
      // 3.修改图书接口
      document.querySelector('.edit').onclick = function () {
        myAxios({
          url: 'http://ajax-api.itheima.net/api/books/6',
          method: 'put',
          data: {
            bookname: '水浒传',
            author: '施耐庵',
            publisher: '犇犇出版社',
          }, // 对象
        }).then((res) => {
          console.log('res:', res)
        })
      }
      // 4.删除图书
      document.querySelector('.delete').onclick = function () {
        myAxios({
          url: 'http://ajax-api.itheima.net/api/books/6',
          method: 'delete',
        }).then((res) => {
          console.log('res:', res)
        })
      }

      // myAxios({
      //   // url: 'http://ajax-api.itheima.net/api/login',
      //   url: 'http://ajax-api.itheima.net/api/books',
      //   method: 'post',
      //   data: {
      //     bookname: '红楼梦',
      //     author: '曹雪芹',
      //     publisher: '人民出版社',
      //   }, // 对象
      // }).then(res => {
      //   // console.log('then-res:', res)
      //   const data = JSON.parse(res)
      //   console.log('data:', data)
      // })
    </script>
  </body>
</html>
